<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="{{ asset('lib/layui/layui.js') }}" charset="utf-8"></script>
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8, target-densitydpi=low-dpi" />
    {{-- <link rel="stylesheet" href="{{asset('css/font.css')}}"> --}}
    {{-- <link rel="stylesheet" href="{{asset('css/xadmin.css')}}"> --}}
    <link rel="stylesheet" href="{{ asset('css/jquery-ui.css') }}">

    {{-- <script type="text/javascript" src="{{asset('js/xadmin.js')}}"></script> --}}
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/jquery-ui.js') }}"></script>

    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #sortable li {
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            width: 150px;
            height: 90px;
            font-size: 2em;
            text-align: center;
        }

        #dorm-container {
            text-align: center;
            display: flow
        }

        #dorm-no {
            background-color: #fbed50;
        }
    </style>


    <script>
        $(function() {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
        });

        function reset() {
            $("#sortable").sortable('cancel');
        }

        function save() {
            var arr = $("#sortable").sortable('toArray');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '/dorms/order/save',
                type: 'POST',
                data: {
                    order: arr
                },
                dataType: "json",
                success: function(d) {
                    if (d.error) {
                        layer.msg('保存失败：' + d.message, {
                            icon: 2,
                            time: 1000
                        });
                    } else {
                        layer.msg(`保存成功`, {
                            icon: 1,
                            time: 1000
                        });
                    }
                },
                error: function(err) {
                    layer.msg('保存失败', {
                        icon: 2,
                        time: 1000
                    });
                }
            });
        }
    </script>
</head>

<body>
    <div style="padding: 5px 20px;">
        <button type="button" class="layui-btn" onclick="reset()">重置</button>
        <button type="button" class="layui-btn" onclick="save()">保存</button>
    </div>
    <div class="layui-fluid">
        <ul id="sortable">
            @foreach ($dorms as $k => $dorm)
                {{--    <li class="ui-state-default">{{str_pad($k+1,2,'0',STR_PAD_LEFT)}}  {{$dorm->name}}>></li> --}}
                <li class="ui-state-default" id="{{ $dorm->id }}">
                    <div id="dorm-container">
                        <div id="dorm-no">{{ str_pad($k + 1, 3, '0', STR_PAD_LEFT) }}</div>
                        <div id="dorm-code">{{ $dorm->code }}</div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>

</body>

</html>
